import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, notification, Button, Icon } from 'antd';
import { FormDivider } from '@/components/DividerItem'
import styled from 'styled-components'

const ContainerC = styled.section`
  margin-left: 100px;
`
const MySpan = styled.span`
  color: #ED7109; 
  font-size: 15px;
  margin-left: 12px;
  display: inline-block;
  margin-bottom: 34px;
`

@connect(({ setting, user }) => ({
  data: setting.detail || {},
  rule: setting.detail ? setting.detail.valueRuleList : {} || {},
  user: user.details
}))
class Setting extends Component<any, any> {
  readonly state = {
    isAutoCreate: true,
    isMessage: true,
    isTelephone: true,
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'setting/queryDetail' }).then(() => {
      const { data } = this.props;
      const { isAutoCreate } = data;

      this.setState({
        isAutoCreate: !!isAutoCreate,
      })
    })
  }

  handleSubmit = e => {
    e.preventDefault();
    const { form, dispatch, user } = this.props;

    form.validateFields((err, values) => {
      
      const ans = {
        id: user.companyId,
        isAutoCreate: +this.state.isAutoCreate,
      }
      
      if (!err) {
        dispatch({
          type: 'setting/modifyDetail', payload: ans
        })
      } else {
        notification['error']({
          message: `修改失败`,
          description: '字段验证不通过',
        });
      }
    })
  }


  render() {
    const { isAutoCreate } = this.state;

    const MakeDevice = FormDivider('plus', '自动创建子设备', isAutoCreate, () => this.setState({ isAutoCreate: !this.state.isAutoCreate }))

    return (
      <section>
        <Form layout="horizontal" onSubmit={this.handleSubmit} style={{ position: 'relative' }}>
          {/* 上面 */}
          <MakeDevice />
          <ContainerC >
            <div>
              <Icon type="issues-close" style={{ color: '#ED7109', fontSize: 16 }} />
              <MySpan>目前只支持松江、海湾的消防主机自动创建子设备</MySpan>
            </div>
          </ContainerC>
        
          <Button style={{ position: 'absolute', top: '600%', left: '250px' }} type="primary" htmlType="submit">保存</Button>
          <Button style={{ position: 'absolute', top: '600%', left: '100px' }}
            onClick={() => {
              window.history.back();
            }}
          >
            取消
          </Button>
         
        </Form>
      </section>
    );
  }
}

const SettingS = Form.create()(Setting);
export default SettingS;
